layui.use(['table', 'layer'], function () {
    var layer = parent.layer === undefined ? layui.layer : top.layer,
        $ = layui.jquery,
        table = layui.table;

    /**
     * 加载表格数据
     */
    var tableIns = table.render({
        id: 'userList',
        elem: '#userList',   // 容器元素Id属性值
        height: 'full-125',     // 容器的高度（差值）
        url: path + '/user/list', // 数据接口，对应后台接口
        page: true, //开启分页
        cellMinWidth: 95, // 单元格最小的宽度
        limit: 10,  // 默认每页显示的数量
        limits: [10, 20, 30, 40, 50], // 每页页数的可选项
        toolbar: '#toolbarDemo',  // 开启头部工具栏
        cols: [[ // 表头
            // field：与数据库中字段名对应一致
            // title：定义列的标题
            // sort：定义是否可以排序
            // fixed：固定列
            {type: 'checkbox', fixed: 'center'},
            {field: 'id', title: '编号', align: 'center', fixed: 'left', minWidth: 30},
            {field: 'userName', title: '账号', align: 'center'},
            {field: 'nick', title: '昵称', align: 'center', minWidth: 150},
            {field: 'trueName', title: '真实姓名', align: 'center', minWidth: 100},
            {field: 'roleName', title: '组别', align: 'center'},
            {field: 'email', title: '邮箱', align: 'center', minWidth: 180},
            {field: 'phone', title: '联系电话', align: 'center', minWidth: 120},
            {field: 'creatTime', title: '创建时间', align: 'center', minWidth: 180},
            // 操作栏
            {title: '操作', templet: '#userListBar', fixed: 'right', align: 'center', minWidth: 150}
        ]]
    });

    /**
     * 搜索按钮的点击事件
     */
    $(".search_btn").click(function () {
        /**
         * 表格重载
         * 做条件查询功能
         */
        tableIns.reload({
            // 设置需要传递给后端的参数
            where: {
                // 通过文本框的值，设置传递的参数
                userName: $("[name='userName']").val(), // 用户账号
            },
            page: {
                curr: 1 //重新从第 1 页开始
            }
        });

    });

    /**
     * 行工具栏监听事件
     */
    table.on('tool(userTable)', function (data) {
        // 判断类型
        if (data.event === 'edit') {  // 编辑操作
            // 得到对应的用户Id
            var userId = data.data.id;
            // 打开编辑窗口
            openUserDialog(userId);
        } else if (data.event === "del") { // 删除操作

            // 弹出确认框询问用户是否确认删除
            layer.confirm('确定删除该记录吗？', {icon: 3, title: "用户管理 - 删除用户"}, function (index) {
                // 关闭确认框
                layer.close(index);

                // 发送ajax请求删除记录
                $.ajax({
                    type: "delete",
                    url: path + "/user/delete",
                    data: {
                        ids: data.data.id
                    },
                    success: function (result) {
                        // 判断删除结果
                        if (result.code === 200) {
                            // 提示成功
                            layer.msg("删除成功！", {icon: 6})
                            // 刷新表格
                            tableIns.reload();
                        } else {
                            // 提示失败
                            layer.msg(result.msg, {icon: 5})
                        }
                    }
                });
            });
        }
    })

    /**
     * 打开 编辑/更新 的操作窗口
     * 如果用户Id为空则表示添加，用户Id不为空则表示编辑操作
     *
     * @param userId
     */
    function openUserDialog(userId) {
        // 定义窗口的标题
        var title = "用户管理 - 添加用户信息"
        // 定义窗口的跳转路径
        var url = path + "/user/toUserPage"

        // 判断用户Id是否为空
        if (userId != null && userId != '') {
            // 此时执行的是编辑操作
            title = "用户管理 - 编辑用户信息"
            //将用户Id传递到后台
            url += '?userId=' + userId
        }

        // 打开对话框，在iframe层
        layui.layer.open({
            type: 2,
            title: title, // 弹出层的标题
            area: ['420px', '440px'], // 弹出层的宽高
            content: url, // url地址
            // 可以进行最大化与最小化窗口的操作
            maxmin: true
        });
    }

    /**
     * 数据表格的头部工具栏
     * 格式： toolbar(数据表格的lay-filter属性值)
     */
    table.on('toolbar(userTable)', function (data) {
        // 判断对应的事件类型
        if (data.event === 'add') {
            // 添加操作
            openUserDialog();
        } else if (data.event === 'del') {
            // 删除操作
            deleteSaleChance(data);
        }
    })

    /**
     * 批量删除用户数据
     *
     * @param data
     */
    function deleteSaleChance(data) {
        // 获取数据表格中选中的行数据
        var checkStatus = table.checkStatus("userList");

        // 获取所有被选中的记录对应的数据
        var userData = checkStatus.data;

        // 判断用户是否选择了记录
        if (userData.length < 1) {
            layer.msg("请选择要删除的记录！", {icon: 5})
            return;
        }

        // 询问用户是否确认删除
        layer.confirm('您确定要删除选中的记录吗？', {icon: 3, title: '用户管理'}, function (index) {
            // 关闭确认框
            layer.close(index);
            // 传递的参数是数组 ids=1&ids=2&ids=3
            var ids = "ids=";
            // 循环选中的行记录的数据
            for (var i = 0; i < userData.length; i++) {
                if (i < userData.length - 1) {
                    ids = ids + userData[i].id + "&ids=";
                } else {
                    ids = ids + userData[i].id;
                }
            }

            // 发送ajax请求，执行删除营销机会操作
            $.ajax({
                type: "delete",
                url: path + "/user/delete",
                data: ids,  // 传递的参数是一个数组
                success: function (result) {
                    // 判断删除结果
                    if (result.code === 200) {
                        // 提示成功
                        layer.msg("删除成功！", {icon: 6})
                        // 刷新表格
                        tableIns.reload();
                    } else {
                        // 提示失败
                        layer.msg(result.msg, {icon: 5})
                    }
                }
            });
        });
    }
});
